<template>
  <div class="system-feedback">
    <!-- 主标题：增加渐变色下划线 -->
    <h2 class="page-title">系统反馈</h2>
    
    <div class="feedback-content">
      <!-- 联系我们区块 -->
      <div class="section-card contact-section">
        <h3 class="section-title">
          <i class="iconfont icon-contact"></i> 联系我们
        </h3>
        <p class="section-desc">
          如果您在使用系统过程中遇到任何问题或有任何建议，请通过以下方式联系我们：
        </p>
        
        <div class="contact-methods">
          <!-- 客服热线 -->
          <div class="contact-card">
            <h4 class="contact-title">
              <i class="iconfont icon-phone"></i> 客服热线
            </h4>
            <p class="contact-note">工作时间：周一至周五 9:00-17:00</p>
            <p class="contact-info">电话：400-123-4567</p>
            <button @click="copyPhoneNumber" class="action-btn">
              <span v-if="!isCopying">复制号码</span>
              <span v-else class="loading">
                <i class="iconfont icon-loading"></i> 复制中...
              </span>
            </button>
          </div>
          
          <!-- 管理员邮箱 -->
          <div class="contact-card">
            <h4 class="contact-title">
              <i class="iconfont icon-email"></i> 管理员邮箱
            </h4>
            <p class="contact-note">如需重置密码或账号相关问题，请联系管理员</p>
            <p class="contact-info">邮箱：admin@163.com</p>
            <button @click="goToNetEaseMail" class="action-btn">
              <span v-if="!isSending">前往网易邮箱</span>
              <span v-else class="loading">
                <i class="iconfont icon-loading"></i> 跳转中...
              </span>
            </button>
          </div>
        </div>
      </div>
      
      <!-- 常见问题区块 -->
      <div class="section-card faq-section">
        <h3 class="section-title">
          <i class="iconfont icon-question"></i> 常见问题
        </h3>
        
        <!-- FAQ折叠项 -->
        <div class="faq-list">
          <div class="faq-card" @click="toggleFaq(1)">
            <div class="faq-header">
              <h4 class="faq-title">如何重置我的密码？</h4>
              <i class="iconfont" :class="activeFaq === 1 ? 'icon-up' : 'icon-down'"></i>
            </div>
            <div class="faq-content" v-show="activeFaq === 1">
              <p>您可以直接联系管理员，提供您的账号信息，管理员会帮您重置密码。</p>
            </div>
          </div>
          
          <div class="faq-card" @click="toggleFaq(2)">
            <div class="faq-header">
              <h4 class="faq-title">系统出现数据异常怎么办？</h4>
              <i class="iconfont" :class="activeFaq === 2 ? 'icon-up' : 'icon-down'"></i>
            </div>
            <div class="faq-content" v-show="activeFaq === 2">
              <p>请先截图保存异常情况（建议包含时间、页面地址），然后联系客服或管理员。若紧急情况可优先拨打客服热线，我们会在1小时内联系开发者处理。</p>
            </div>
          </div>
          
          <div class="faq-card" @click="toggleFaq(3)">
            <div class="faq-header">
              <h4 class="faq-title">如何获取更多使用帮助？</h4>
              <i class="iconfont" :class="activeFaq === 3 ? 'icon-up' : 'icon-down'"></i>
            </div>
            <div class="faq-content" v-show="activeFaq === 3">
              <p>您可通过三种方式获取帮助：1. 拨打客服热线获取基础服务；2. 联系开发团队：400-157-1234；3. 加入官方用户群（群号：123456789）获取同行交流帮助。</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
export default {
  name: 'SystemFeedback',
  setup() {
    // FAQ折叠状态
    const activeFaq = ref(0)
    // 按钮加载状态
    const isCopying = ref(false)
    const isSending = ref(false)

    // 复制电话号码
    const copyPhoneNumber = () => {
      isCopying.value = true
      const phoneNumber = '400-123-4567'
      
      // 创建临时输入框
      const tempInput = document.createElement('input')
      tempInput.value = phoneNumber
      tempInput.style.position = 'absolute'
      tempInput.style.left = '-9999px'
      document.body.appendChild(tempInput)
      
      // 选中文本并复制
      tempInput.select()
      document.execCommand('copy')
      
      // 移除临时输入框
      document.body.removeChild(tempInput)
      
      // 显示复制成功提示
      alert('电话号码已复制到剪贴板！')
      
      // 重置状态
      setTimeout(() => isCopying.value = false, 1000)
    }
    
    // 跳转至网易邮箱
    const goToNetEaseMail = () => {
      isSending.value = true
      window.open('https://mail.163.com/', '_blank')
      setTimeout(() => isSending.value = false, 1000)
    }

    // 切换FAQ展开/折叠
    const toggleFaq = (id) => {
      activeFaq.value = activeFaq.value === id ? 0 : id
    }
    
    return {
      activeFaq,
      isCopying,
      isSending,
      copyPhoneNumber,
      goToNetEaseMail,
      toggleFaq
    }
  }
}
</script>

<style scoped>
/* 引入图标库（可替换为项目实际使用的图标库） */
/* 移除外部字体CSS引用，使用项目内置字体 */

/* 页面容器 */
.system-feedback {
  background-color: #fff;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  margin: 20px;
}

/* 主标题 */
.page-title {
  color: #1f2937;
  margin-bottom: 25px;
  font-size: 24px;
  font-weight: 600;
  position: relative;
  padding-bottom: 10px;
}
.page-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 60px;
  height: 4px;
  background: linear-gradient(90deg, #409eff, #66b1ff);
  border-radius: 2px;
}

/* 内容容器 */
.feedback-content {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* 功能区块卡片 */
.section-card {
  background-color: #f9fafb;
  border-radius: 12px;
  padding: 25px;
  transition: all 0.3s ease;
}
.section-card:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

/* 区块标题 */
.section-title {
  color: #374151;
  margin-bottom: 18px;
  font-size: 18px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}
.section-title .iconfont {
  color: #409eff;
  font-size: 20px;
}

/* 区块描述 */
.section-desc {
  color: #6b7280;
  line-height: 1.8;
  margin-bottom: 20px;
  font-size: 14px;
}

/* 联系方式布局 */
.contact-methods {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
}

/* 联系卡片 */
.contact-card {
  background-color: #fff;
  padding: 24px;
  border-radius: 10px;
  border: 1px solid #f0f2f5;
  transition: all 0.3s ease;
}
.contact-card:hover {
  border-color: #e6f7ff;
  background-color: #f0f7ff;
}

/* 联系标题 */
.contact-title {
  color: #409eff;
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}
.contact-title .iconfont {
  font-size: 18px;
}

/* 联系备注 */
.contact-note {
  color: #9ca3af;
  line-height: 1.8;
  margin-bottom: 12px;
  font-size: 13px;
}

/* 联系信息 */
.contact-info {
  font-size: 16px;
  font-weight: 500;
  color: #1f2937;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 按钮样式 */
.action-btn {
  padding: 10px 24px;
  background-color: #409eff;
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  position: relative;
  overflow: hidden;
}
/* 按钮点击波纹 */
.action-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120%;
  padding-bottom: 120%;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.6s ease;
}
.action-btn:active::after {
  transform: translate(-50%, -50%) scale(1);
}
/* 按钮hover状态 */
.action-btn:hover {
  background-color: #3390e9;
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
}
/* 加载动画 */
.loading .icon-loading {
  animation: loading 1s linear infinite;
}
@keyframes loading {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* FAQ列表 */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* FAQ卡片 */
.faq-card {
  background-color: #fff;
  border-radius: 10px;
  border: 1px solid #f0f2f5;
  overflow: hidden;
  transition: all 0.3s ease;
  cursor: pointer;
}
.faq-card:hover {
  border-color: #e6f7ff;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.1);
}

/* FAQ头部 */
.faq-header {
  padding: 18px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.faq-title {
  color: #1f2937;
  font-size: 15px;
  font-weight: 500;
  margin: 0;
}
.faq-header .iconfont {
  color: #409eff;
  font-size: 16px;
  transition: transform 0.3s ease;
}
.icon-up {
  transform: rotate(180deg);
}

/* FAQ内容 */
.faq-content {
  padding: 0 24px 18px;
  border-top: 1px solid #f0f2f5;
  transition: all 0.3s ease;
}
.faq-content p {
  color: #6b7280;
  line-height: 1.8;
  margin: 0;
  font-size: 14px;
}

/* 响应式适配 */
@media (max-width: 768px) {
  .system-feedback {
    padding: 20px;
    margin: 10px;
  }
  .page-title {
    font-size: 20px;
  }
  .section-card {
    padding: 20px;
  }
  .contact-methods {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .contact-card {
    padding: 20px;
  }
  .faq-header {
    padding: 16px 20px;
  }
  .faq-content {
    padding: 0 20px 16px;
  }
}
</style>